<template>
    <div class="demo-list">
        <div class="m-box">
			<ul class="m-list" v-if="itemsList && itemsList.length > 0">
				<li v-for="(item, index) in itemsList">
					<div class="btn clearfix">
                        <a :href="'#/details?listId='+item.id">
                            <span class="pic"><img src="../../assets/image/icon.png" width="100%" height="100%" /></span>
                            <p class="name">{{item.content}}}</p>
                        </a>
                        <p class="txt">{{item.created_at}}</p>
                        <!-- <p class="time">星期五</p> -->
					</div>
				</li>
			</ul>
        </div>
    </div>
</template>

<script>
    import api from '../../libs/api';

    export default {
        props: [],
        data() {
            return {
                itemsList: null,
                searchVal: ''
            };
        },
        computed: {
            
        },
        mounted() {
            
        },
        methods:{
            search:function(params) {
                let self = this;
                let q = self.searchVal;
                console.log(q)
                api.article.search(q).then(function(result) {
                    console.log(result)
                    if(result && result.code == 200){
                        self.itemsList = result.data.data
                    }else{
                        let l = window.location.href;
                        window.location = 'http://lres.gzhc365.com/ggyy/api/auth/wx_authorize?return_url='+l
                    }
                });
            }
        },
        created(){
            let self = this;
            api.article.list().then(function(result) {
                if(result && result.code == 200){
                    self.itemsList = result.data.data
                }else if(result.code == 1200){
                    let l = window.location.href;
                    window.location = 'http://lres.gzhc365.com/ggyy/api/auth/wx_authorize?return_url='+l
                }
            });
        }
    }
</script>
<style>
.demo-list {
    padding-bottom: 5rem;
    background: #fff;
}
.demo-list .m-search {
    padding: 1rem;
    background: #f5f5f5;
}
.demo-list .m-search .box {
    width: 100%;
    height: 3.2rem;
    background: #fff;
    border-radius: 4px;
}
.demo-list .m-search .icon {
    float: left;
    margin: 0.7rem 1rem 0;
    width: 1.8rem;
    height: 1.8rem;
    display: block;
}
.demo-list .m-search .icon img {
    width: 100%;
}
img {
    display: block;
}
.demo-list .m-search .int {
    float: left;
    width: 17.5rem;
    height: 3.2rem;
    line-height: 3.1rem;
    font-size: 1.3rem;
    border: 0 none;
    background: #fff;
    color: #52505a;
}
.demo-list .m-search .int-button {
    background: #337be0;
    color: #fff;
    height: 100%;
    border: none;
    border-radius: 3px;
    width:4.4rem;
    float:right;
    visibility:initial !important;
}

.demo-list .m-box li {
    position: relative;
    margin: 0 1rem;
    padding: 1rem 0 2.2rem 0;
    background: #fff;
    border-bottom: 1px solid #E9E9E9;
}
.m-list li a{
    color: #999;
    text-decoration:none;
}
.demo-list .m-box .btn {
    display: block;
}
.demo-list .m-box .pic {
    float: left;
    overflow: hidden;
    margin: 0 1rem 0 0;
    width: 5rem;
    height: 5rem;
}
.demo-list .m-box .name{
    font-size: 14px;
}
.demo-list .m-box .name, .demo-list .m-box .txt {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.demo-list .m-box .txt {
    font-size: 1.3rem;
    padding-top: 0.3rem;
    color: #999;
}
.demo-list .m-box .time {
    position: absolute;
    top: 1.1rem;
    right: 0;
    font-size: 1.2rem;
    color: #999;
}
</style>

